import React, { Component } from 'react'
import { Col } from 'antd';
import styles from '../style/index.less';
import CommonEchartComp from '../../components/CommonEchartComp';

export default class Echart extends Component {
  // Echarts图配置
  echartsConfig = {
    municipalUnits: { title: '市政工程占比分析', formatter: '万元', color: ['#5B9BD5', '#ED7D31'] },
    waterProject: { title: '接水工程建设情况', formatter: '万元', color: ['#D48265', '#ED7D31', '#70AD47', '#5B9BD5'] },
    pipelineConstruction: { title: '市政工程占比分析', formatter: 'km', color: ['#70AD47', '#ED7D31', '#5B9BD5'] },
  }

  // 生成echarts
  getEcharts = (item) => {
    const legend = item.data.map(val => val.name);
    const { title, formatter, color } = this.echartsConfig[item.name];
    const echartsOption = {
      containerStyle: { width: '100%', height: 300 },
      option: {
        tooltip: {
          trigger: 'item',
          formatter: `{a} <br/>{b}: {c}${formatter} ({d}%)`
        },
        legend: {
          orient: 'vertical',
          right: 10,
          data: legend
        },
        series: [
          {
            name: title.substring(0, 4),
            type: 'pie',
            color,
            radius: item.name === 'pipelineConstruction' ? ['0', '70%'] : ['50%', '70%'],
            data: item.data
          }
        ]
      }
    }
    return (
      <Col span={8} className={styles.engManage_echarts} key={item.name}>
        <div className={styles.echarts_title}><span style={{ paddingLeft: '10px' }}>{title}</span></div>
        <div className={styles.echarts_main}>
          <CommonEchartComp {...echartsOption} />
        </div>
        <div className={styles.echarts_detail}>
          {item.data.map(ele => {
            return (
              <div className={styles.detail_tap} style={{ width: `${100 / item.data.length}%` }} key={ele.name}>
                <div className={styles.detail_num}>{ele.value}</div>
                <div className={styles.detail_name}>{ele.name}</div>
                <div className={styles.detail_formatter}>({formatter})</div>
              </div>
            )
          })}
        </div>
      </Col>
    )
  }

  render() {
    return (
      <>
        {this.getEcharts(this.props)}
      </>
    )
  }
}
